<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的静态网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            text-align: center;
        }
        nav {
            background-color: #333;
            overflow: hidden;
        }
        nav a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            float: left;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
        section {
            padding: 20px;
            background-color: white;
            margin: 20px;
        }
        footer {
            text-align: center;
            padding: 10px;
            background-color: #333;
            color: white;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的静态网页示例。</p>
</header>

<nav>
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系我们</a>
</nav>

<section id="home">
    <h2>首页</h2>
    <p>这是首页内容。</p>
    <img src="../Pictures/1.jpg" alt="示例图片" width="400">
</section>

<section id="about">
    <h2>关于我们</h2>
    <p>这是关于我们的一些介绍。</p>
    <a href="https://www.example.com" target="_blank">点击这里访问我们的网站</a>
</section>

<section id="contact">
    <h2>联系我们</h2>
    <p>你可以通过以下方式与我们联系：</p>
    <ul>
        <li>电子邮件: example@example.com</li>
        <li>电话: 123-456-7890</li>
    </ul>
</section>

<footer>
    <p>版权所有 &copy; 2025 我的网页</p>
</footer>

</body>
</html>
